<template>
  <el-dialog
    title="广告详情"
    width="1200px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :modal-append-to-body="false"
  >
    <el-form :model="form" ref="form">
      <div class="dialog-box">
        <div class="dialog-box-item">
          <el-form-item label="标题" prop="title" label-width="80px">
            <div class="value">{{form.title}}</div>
          </el-form-item>
          <el-form-item label="显示位置" prop="locationType" label-width="80px">
            <div class="value">{{form.locationType === '0' ? '首页' : form.locationType === '1' ? '我的' : form.locationType === '2' ? '轮播' : ''}}</div>
          </el-form-item>
          <div class="el-form-item__label" style="width: 100%;text-align: left;padding-left: 26px">预览图</div>
          <div class="pic-box">
            <el-image :src="form.photoUrl + '?v=' + new Date().getTime()">
              <div slot="error" class="image-slot">暂无图片</div>
            </el-image>
          </div>
        </div>
        <div class="dialog-box-item">
          <el-divider content-position="left">广告内容</el-divider>
          <el-link :href="form.content" target="_blank">
            {{form.content}}
          </el-link>
          <!--<div v-html="form.content" class="ql-editor content"></div>-->
        </div>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import MyUpload from '@/components/my-upload'
  import {htmlDecode} from '@/libs/util.htmlcode'
  import { mapActions } from 'vuex'
  export default {
    name: 'page',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      info: {
        type: Object,
        default: null
      }
    },
    data () {
      return {
        form: {
          id: '',
          title: '',
          content: '',
          locationType: '',
          moduleType: 1,
          photoUrl: '',
          photoOssId: ''
        }
      }
    },
    components: {
      MyUpload
    },
    mounted () {
      this.$nextTick(() => {
        this.getInfo()
      })
    },
    methods: {
      ...mapActions('d2admin/pm.ad', [
        'adInfo'
      ]),
      // 详情
      getInfo () {
        this.adInfo({
          id: this.info.id
        }).then(res => {
          res.locationType = String(res.locationType)
          res.content = htmlDecode(res.content)
          this.form = res
        })
      },
      // 取消
      cancel() {
        this.$emit('cancel', false)

      },
      // 提交回调
      submit() {
        this.$emit('submit', false)
      }
    }
  }
</script>

<style lang="scss">
  .dialog-box {
    display: flex;
    flex-direction: row;

    .dialog-box-item {
      flex: 1;
      padding: 10px;
      &:first-child {
        width: 300px;
        flex: none;
      }
      .content {
        width: 820px;
        height: 460px;
        img {
          max-width: 100%;
        }
      }
      .value {
        border-bottom: 1px solid #DCDFE6;
        height: 40px;
        padding: 0 15px;
        &.textarea {
          padding: 5px 15px;
          line-height: 1.5;
          border-radius: 4px;
          box-sizing: border-box;
          overflow-y: auto;
        }
        &.tag {
          overflow-y: auto;
          max-height: 100px;
          height: auto;
          min-height: 40px;
          .el-tag {
            width: 60px;
            text-align: center;
            margin-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

    }
    .required {
      color: #F56C6C;
      margin-right: 4px;
    }
  }
</style>
